<!-- 传阅详情 -->
<template>
  <view>
    <van-popup v-model="showCompo" closeable round position="bottom" :style="{ height: '80%' }"
               @click-close-icon="toClose" @click-overlay="toClose">
      <view class="content">
        <view class="title">
          【传阅】{{ circuTitle }}
        </view>
        <view class="form-border" style="box-sizing: border-box;">
          <view class="form-row">
            <view class="flex-one flex-block form-border-right">
              <label>传阅人员</label>
            </view>
            <view class="flex-five flex-center form-border-right">
              <view v-for="(dept,index) in deptArr">
                <span v-if="nameArr != null && nameArr.length > 0">
                  {{ dept }}：{{ nameArr[index] }}
                </span>
              </view>
            </view>
          </view>
          <view class="form-row">
            <view class="flex-one flex-block form-border-right">
              <label>传阅意见</label>
            </view>
            <view class="flex-five flex-center form-border-right">
              <view class="opinion" v-for="(item,index) in opinArr">
                <view class="opinion-left">{{ item.opinion }}</view>
                <view class="opinion-right">
                  <!-- base64签名图片 -->
                  <img v-if="item.signature!='' && item.signature != undefined"
                       :src="`data:image/png;base64,`+item.signature" alt="图片未上传"/>
                  <text v-else class="opinion-user">{{ item.userName }}</text>
                  <text class="opinion-date">{{ item.approvalTime }}</text>
                </view>
              </view>
            </view>
          </view>
          <view class="form-row">
            <view class="flex-one flex-block form-border-right">
              <label>传阅公文</label>
            </view>
            <view class="flex-five flex-center form-border-right">
              <span>{{ circuTitle }}</span>
            </view>
          </view>
        </view>
      </view>
    </van-popup>
  </view>

</template>

<script>
export default {
  props: {
    showCircu: {
      type: Boolean,
      default: false
    },
    proInstId: {
      type: String,
      default: null
    },
    title: {
      type: String,
      default: ''
    }
  },

  data() {
    return {
      showCompo: false, // 当前组件是否显示
      circuTitle: '',   // 标题
      deptArr: [],  // 部门
      nameArr: [],  // 人员
      opinArr: [],  // 意见
    }
  },
  mounted() {

  },
  watch: {
    showCircu(val) {
      this.showCompo = val
    },
    proInstId: {
      handler(nval, oval) {
        if (nval != null && nval != '') {
          this.getCirculate(nval)
          this.getCirculateApprovalwrite(nval)
        }
      },
      immediate: true,
      deep: true
    },
    title(val) {
      this.circuTitle = val
    }
  },
  methods: {
    // 关闭弹出层
    toClose() {
      this.$emit('closeCirculate', this.showCompo)
    },

    // 传阅情况
    getCirculate(proInstId) {
      const _this = this
      _this.$http({
        url: _this.$http.adornUrl(`/caac/oa/component/workflow/circulatecontroller/quertcirs`),
        method: 'get',
        params: _this.$http.adornParams({
          'systemKey': _this.cache.get('userInfo').systemKey,
          'systemFlag': _this.cache.get('userInfo').systemFlag,
          'proInstId': proInstId,
          'senderId': _this.cache.get('userInfo').userId
        })
      }).then(({data}) => {
        if (data.code == 200 && data.data.length > 0) {
          let deptNames = []
          data.data.forEach(t => {
            let name = t.receiverDeptName
            if (!deptNames.includes(name)) {
              deptNames.push(t.receiverDeptName)
            }
          })
          let userNames = []
          deptNames.forEach(item => {
            let names = data.data.filter(t => t.receiverDeptName == item)
                    .map(m => {
                      return m.receiverName + '[' + m.readStatus + ']'
                    }).join('，')
            userNames.push(names)
          })
          _this.deptArr = deptNames
          _this.nameArr = userNames
        }
      })
      this.getCirculateApprovalwrite(proInstId)
    },
    // 传阅意见
    getCirculateApprovalwrite(proInstId) {
      this.$http({
        url: this.$http.adornUrl(`/caac/oa/component/approval/circulateApprovalwrite`),
        method: 'get',
        params: this.$http.adornParams({
          'systemKey': this.cache.get('userInfo').systemKey,
          'systemFlag': this.cache.get('userInfo').systemFlag,
          'proInstId': proInstId,
        })
      }).then(({data}) => {
        if (data.code == 200 ) {
          if(this.util.isNotEmpty(data.data) && data.data.circulateReview.length > 0){
            this.opinArr = data.data.circulateReview
          }
        }
      })
    },
  }
}
</script>

<style>
  .content {
    padding: 10rpx;
    word-break: break-all;
  }
  .title {
    display: flex;
    justify-content: center;
    color: #26a826;
    font-weight: 600;
    font-size: 36rpx;
    margin-top: 60rpx;
    margin-bottom: 20rpx;
    letter-spacing: 10rpx;
  }
  .title span {
    color: #000000;
  }
  .form-border {
    border: 1px solid #26a826;
    border-bottom: none;
    border-right: none;
  }
  .form-border-right {
    border-bottom: 1px solid #26a826;
    border-right: 1px solid #26a826;
  }
  .form-border-bottom {
    border-bottom: 1px solid #26a826;
  }
  .form-margin {
    margin-left: -0.5px;
    margin-right: -0.5px;
  }
  .form-row {
    display: flex;
    justify-content: center;
    flex: 1;
  }
  .form-row label {
    color: #26a826;
    padding: 10rpx;
    text-align: center;
  }
  .form-row span {
    color: #000000;
    padding: 10rpx;
    text-align: left;
  }
  .flex-block {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
  .flex-one {
    flex: 1;
    position: relative;
    padding: 16rpx 10rpx;
  }

  .flex-two {
    flex: 2;
    position: relative;
    padding: 16rpx 10rpx;
  }

  .flex-three {
    flex: 3;
    position: relative;
    padding: 16rpx 10rpx;
  }

  .flex-four {
    flex: 4;
    position: relative;
    padding: 16rpx 10rpx;
  }

  .flex-five {
    flex: 5;
    position: relative;
    padding: 16rpx 10rpx;
  }

  .flex-six {
    flex: 6;
    position: relative;
    padding: 16rpx 10rpx;
  }

  .flex-seven {
    flex: 7;
    position: relative;
    padding: 16rpx 10rpx;
  }

  .flex-eight {
    flex: 8;
    position: relative;
    padding: 16rpx 10rpx;
  }

  .flex-nine {
    flex: 9;
    position: relative;
    padding: 16rpx 10rpx;
  }

  .flex-ten {
    flex: 10;
    position: relative;
    padding: 16rpx 10rpx;
  }
  .flex-eleven {
    flex: 11;
    position: relative;
    padding: 16rpx 10rpx;
  }
  .flex-twelve {
    flex: 12;
    position: relative;
    padding: 16rpx 10rpx;
  }
  .flex-block-end {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    text-align: center;
    /* font-family: SimSun; */
  }
  /* 意见相关样式 */
  .opinion{
    display: flex;
    flex-direction: column;
    margin: 0 32rpx;
    padding: 20rpx 0rpx;
    overflow: hidden;
    font-size: 28rpx;
    line-height: 24px;
  }
  .opinion .opinion-title{
    text-align: left;
    padding-bottom: 14rpx;
  }
  .opinion .opinion-box{
    margin-bottom: 20rpx;
  }
  .opinion .opinion-left{
    text-align: left;
    color: #323233;
  }
  .opinion .opinion-right{
    text-align: right;
    color: #969799;
  }
  .opinion .opinion-right .opinion-user{
    font-weight: 400;
    color: #000000;
  }
  .opinion .opinion-right .opinion-date{
    color: #323233;
    margin-left: 20rpx;
  }

</style>
